<template>
  <div id="app" >
    <div class="oo">
       <Navigation></Navigation>
  <Main></Main>
  <!-- {{ SideColor}} -->
    </div>
 
  </div>
</template>


<script>
import Navigation from './components/Navigation.vue'
import Main from './components/Main.vue'
export default {
  data() {
    return {
      
    }
  },
  components:{
    Navigation,
    Main,
 
  },
computed:{
  SideColor(){
    return this.$store.state.SideColor;
  },
   rightbackground(){
    return this.$store.state.rightbackground;
  },
  backColor(){
    return this.$store.state.backColor;
  },
  TextColor(){
    return this.$store.state.TextColor;
  }
},
watch:{
   SideColor(val){
     document.getElementById("app").style.setProperty('--SideColor',val)
// console.log(val);
   },
   rightbackground(val){
     document.getElementById("app").style.setProperty('--rightbackground',val)
// console.log(val);
   },
  backColor(val){
     document.getElementById("app").style.setProperty('--backColor',val)
// console.log(val);
   },
 TextColor(val){
     document.getElementById("app").style.setProperty('--TextColor',val)
// console.log(val);
   }
}
}
</script>


<style lang="less">
// body{
  // background-color:#1e1d2b;
//   background-color: rgb(239, 239, 244);
//   background-color: var(--backColor);
// }
#app{
  // --rightbackground:rgb(255, 255, 255);
  // //右边背景色
  // --SideColor:rgb(255, 255, 255);
  // // 左边导航背景色
  // --backColor: rgb(239, 239, 244);
  // // 背景色
  // --TextColor:rgb(255, 180, 190);
  // 文字色
  --rightbackground: #2f3042;
  //右边背景色
  --SideColor:#2f3042;
  // 左边导航背景色
  --backColor: #1e1d2b;
  // 背景色
  --TextColor:#fff;
  // // 文字色
}
body{
  padding: 0px;
   margin: 0px;
}
.oo{
 
  height: 936px;
   background-color: var(--backColor);
  }
</style>
